<template>
	<view class="statement">
		<view class="list">
			<view class="line">
				<view class="list2 list-l bgf1" @click="_router('./market')">
					<image src="/static/img/statement1.png" />
					<view>销售报表</view>
				</view>
				<view class="list2 list-r bgf2" @click="_router('./profit')">
					<image src="/static/img/statement2.png" />
					<view>获利报表</view>
				</view>
			</view>
			<view class="line">
				<view class="list3 list-l" @click="_router('./salesreturn')">
					<view class="list1 bgf3">
						<image src="/static/img/statement3.png" />
						<view>退货报表</view>
					</view>
					<view class="list1 bgf4" @click="_router('./supplyshortage')">
						<image src="/static/img/statement4.png" />
						<view>断货报表</view>
					</view>
				</view>
				<view class="list3 list-r  bgf5" @click="_router('./exchange')">
					<image src="/static/img/statement5.png" />
					<view>换色/换码报表</view>
				</view>
			</view>
			<view class="line">
				<view class="list2 list-l bgf6" @click="_router('./performance')">
					<image src="/static/img/statement6.png" />
					<view>业绩报表</view>
				</view>
				<view class="list2 list-r bgf7" @click="_router('./handed')">
					<image src="/static/img/statement7.png" />
					<view>需上交金额报表</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {};
	},
	methods: {
		_router(router) {
			uni.navigateTo({
			    url: router
			});
		}
	}
};
</script>

<style lang="less" scoped>
.list {
	padding: 51rpx 20rpx;
	.line {
		display: flex;
		width: 100%;
		margin-bottom: 21rpx;
		text-align: center;
		color: #ffffff;
		.bgf1 {
			width: 100%;
			background: linear-gradient(0deg, #dd2a99, #fe5d6c);
		}
		.bgf2 {
			width: 100%;
			background: linear-gradient(0deg, #fdc769, #fd6563);
		}
		.bgf3 {
			width: 100%;
			background: linear-gradient(0deg, #e89efd, #98a1fc);
		}
		.bgf4 {
			width: 100%;
			background: linear-gradient(0deg, #f65cb3, #fcbbbb);
		}
		.bgf5 {
			width: 100%;
			background: linear-gradient(0deg, #ffa060, #fd6563);
		}
		.bgf6 {
			width: 100%;
			background: linear-gradient(0deg, #fea84c, #efde4d);
		}
		.bgf7 {
			width: 100%;
			background: linear-gradient(0deg, #c739e5, #fd96d6);
		}
		.list-r {
			width: 100%;
			margin-left: 24rpx;
		}
		.list1 {
			height: 225rpx;
			border-radius: 5rpx;
			padding-top: 40rpx;
			box-sizing: border-box;
			view {
				padding-top: 10rpx;
			}
			image {
				width: 90rpx;
				height: 90rpx;
			}
		}
		.list2 {
			height: 260rpx;
			flex: 1;
			border-radius: 5rpx;
			padding-top: 40rpx;
			box-sizing: border-box;
			view {
				padding-top: 32rpx;
			}
			image {
				width: 90rpx;
				height: 90rpx;
			}
		}
		.list3 {
			flex: 1;
			height: 489rpx;		
		}
		.list3 .list1:nth-child(1) {
			margin-bottom: 39rpx;
		}
		.list3.bgf5{
			border-radius: 5rpx;
			padding-top: 155rpx;
			box-sizing: border-box;
			image {
				width: 90rpx;
				height: 90rpx;
			}
			view {
				padding-top: 40rpx;
			}
		}
	}
}
</style>
